
<!DOCTYPE html>
<html>
<head>
<title>jQuery Transit - CSS3 animations for jQuery</title>
<link href='style.css' media='screen' rel='stylesheet' type='text/css' />
<meta content='Super-smooth CSS3 transformations and transitions for jQuery.' name='description' />
<!--[if lt IE 9]><script src='//html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
<link href='http://fonts.googleapis.com/css?family=Marvel:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Signika:300' rel='stylesheet' type='text/css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script src='jquery.transit.min.js'></script>
<script src='script.js'></script>
</head>
<body>
<a class='forkme' href='http://github.com/rstacruz/jquery.transit'>
<img alt='Fork me on Github' src='https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png' />
</a>
<div id='all'>
<hgroup id='header'>
<h1>
jQuery Transit
</h1>
<p>Super-smooth CSS3 transformations and transitions for jQuery &mdash; <span id='version'></span></p>
<script type='text/javascript'>
  //<![CDATA[
    $("#version").html('v'+$.transit.version);
  //]]>
</script>
</hgroup>
<div class='meta'>
<a class='button' href='jquery.transit.js'>
Download
<small>17kb</small>
</a>
<a class='button' href='jquery.transit.min.js'>
Download (Minified)
<small>2kb gzipped</small>
</a>
</div>
<h2>How to use</h2>
<div class='more info'>
<p>
Just include this script after jQuery. Requires jQuery 1.4+.
<br />
Use <em>$('...').transition</em> instead of jQuery's <em>$('...').animate</em>. It has the same syntax as <a href='http://api.jquery.com/animate/'>animate.</a>
</p>
</div>
<h2>Translate (move)</h2>
<div class='info'>
Hover on a demo box to see it in action.
</div>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Translate X</h3>
<pre>$('.box').transition({ <b>x: '90px'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Translate Y</h3>
<pre>$('.box').transition({ <b>y: '30px'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Translate X and Y</h3>
<pre>$('.box').transition({ <b>x: '200px', y: '20px'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<h2>Available transformations</h2>
<div class='info'>
<p>The following transformations are available.
Refer to the <a href="https://github.com/rstacruz/jquery.transit#readme">README</a> for more information.</p>
</div>
<div class='info more transformations'>
<ul>
<li>x<em>(px)</em></li>
<li>y<em>(px)</em></li>
<li>translate<em>(x, y)</em></li>
<li>rotate<em>(deg)</em></li>
<li>rotateX<em>(deg)</em></li>
<li>rotateY<em>(deg)</em></li>
<li>rotate3d<em>(x, y, z, deg)</em></li>
<li>scale<em>(x, [y])</em></li>
<li>perspective<em>(px)</em></li>
<li>skewX<em>(deg)</em></li>
<li>skewY<em>(deg)</em></li>
</ul>
</div>
<h2>Rotation</h2>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Rotate</h3>
<pre>$('.box').transition({ <b>rotate: '30deg'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<h2>Skew</h2>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Skew X</h3>
<pre>$('.box').transition({ <b>skewX: '30deg'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Skew Y</h3>
<pre>$('.box').transition({ <b>skewY: '30deg'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Skew X and Y</h3>
<pre>$('.box').transition({<br />    <b>skewX: '30deg',</b><br />    <b>skewY: '-30deg'</b><br />});</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Scale</h2>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Scale up 120% size</h3>
<pre>$('.box').transition({ <b>scale: 1.2</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Scale 200% horizontally, 150% vertically</h3>
<pre>$('.box').transition({ <b>scale: [2, 1.5]</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 25px;'></div>
</div>
</article>
<h2>3D rotation</h2>
<div class='info'>
<p>You may rotate using <em>rotateX</em> and <em>rotateY</em>. Using <em>perspective</em> is optional,
but it should always come before <em>rotateX/Y</em>.</p>

<p>Note that not all browsers support this yet. Try it in Firefox 10+ or Webkit browsers!</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Rotate X</h3>
<pre>$('.box').transition({<br />    <b>perspective: '100px',</b><br />    <b>rotateX: '180deg'</b><br />});</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Rotate Y</h3>
<pre>$('.box').transition({<br />    <b>perspective: '100px',</b><br />    <b>rotateY: '180deg'</b><br />});</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Rotate 3D</h3>
<pre>$('.box').transition({<br />    <b>perspective: '100px',</b><br />    <b>rotate3d: '1, 1, 0, 180deg'</b><br />});</pre>
</div>
<div class='field'>
<div class='box' style='left: 180px; top: 20px;'></div>
</div>
</article>
<h2>Transitions for other properties</h2>
<div class='info'>You can animate any available CSS property.</div>
<article>
<div class='hover'></div>
<div class='code'>
<h3>$.fn.transition for any CSS property</h3>
<pre>$('.box').transition({<br />    <b>opacity: 0,</b><br />    scale: 1.6<br />});</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').transition({<br />    <b>marginLeft: '20px',</b><br />    <b>height: '80px'</b><br />});</pre>
</div>
<div class='field' style='height: 130px'>
<div class='box' style='left: 180px; top: 35px;'></div>
</div>
</article>
<h2>Callbacks</h2>
<div class='info'>
<p>$.fn.transition(<em>options, [duration], [easing], [callback]</em>);<br/>
$.fn.transition works just like $.fn.animate. You can pass a <em>duration</em>, <em>easing</em>, and <em>callback</em>.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Providing callbacks</h3>
<pre>$('.box').transition({ x: -100 }, <b>function() {</b><br /><b>    $(this).transition({ opacity: 0 });</b><br /><b>}</b>);</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Custom duration</h2>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Custom duration (jQuery style)</h3>
<pre>$('.box').transition({ opacity: 0 }, <b>'slow'</b>);</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Custom duration (in milliseconds)</h3>
<pre>$('.box').transition({ opacity: 0 }, <b>2000</b>);</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Easing</h2>
<div class='info'>
<p>Simply provide a third parameter to <em>$.fn.transition</em>.</p>
</div>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Linear</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'linear'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Ease in</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'in'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Ease</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'ease'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Ease out</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'out'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Ease in-out</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'in-out'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini'>
<div class='hover'></div>
<div class='code'>
<h3>Snap</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'snap'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<article class='mini last'>
<div class='hover'></div>
<div class='code'>
<h3>Custom</h3>
<pre>$('.box').transition({ x: 330 }, 500, <b>'cubic-bezier(0,0.9,0.3,1)'</b>);</pre>
</div>
<div class='field' style='height: 53px'>
<div class='box' style='left: 10px; top: 10px; height: 30px;'></div>
</div>
</article>
<h2>Delay</h2>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Delay by 400ms</h3>
<pre>$('.box').transition({ x: -100, <b>delay: 400</b> });</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Alternate easing/duration syntax</h2>
<div class='info'>
<p>You can provide <em>easing</em> and <em>duration</em> in the options instead
Great for CoffeeScript.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').transition({<br />    x: '100px',<br />    <b>easing: 'snap',</b><br />    <b>duration: '2000ms'</b><br />});</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Optional units</h2>
<div class='info'>
<p>All units (<em>px</em>, <em>deg</em>, <em>ms</em>, etc) are optional.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').transition({<br />    x: <b>100</b>,<br />    duration: <b>2000</b>,<br />    rotate: <b>30</b>,<br />    easing: 'snap'<br />});</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Relative units</h2>
<div class='info'>
<p>jQuery-style relative units are supported. Start your values with either <em>+=</em> or <em>-=</em>.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').transition({<br />    rotate: <b>'+=30deg'</b>,<br />    x: <b>'+=30'</b><br />});</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>$.fn.css</h2>
<div class='info'>
<p>CSS3 transform properties work with <em>$.fn.css</em> as well.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').<b>css({</b><br />    <b>x: '90px'</b>,<br />    <b>y: '10px'</b>,<br />    <b>rotate: '-10deg'</b><br /><b>}</b>)</b>;</pre>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 10px; top: 10px'></div>
</div>
</article>
<article>
<div class='hover'></div>
<div class='code'>
<h3>Transform (automatically adds vendor prefixes)</h3>
<pre>$('.box').css({ <b>transform: 'rotate(40deg)'</b> });</pre>
</div>
<div class='field'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<article>
<div class='code'>
<h3>Getting values</h3>
<pre>$('.box').css({ rotate: '40deg' });<br />alert($('.box').<b>css('rotate')</b>);<br />alert($('.box').<b>css('transform')</b>);</pre>
<button>Run</button>
</div>
<div class='field' style='height: 150px'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<h2>Setting transform origins</h2>
<div class='info'>
<p>You can provide transformation origins via <em>$.fn.css</em>. The format is
<em>"x y"</em>, where <em>x</em> and <em>y</em> are coordinates in the given element.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').css({ <b>transformOrigin: '10px 10px'</b> });<br />$('.box').transition({ rotate: 40, scale: 1.2 });</pre>
</div>
<div class='field'>
<div class='box' style='left: 10px; top: 10px;'></div>
</div>
</article>
<h2>Chaining / effect queue</h2>
<div class='info'>
<p>Transit uses jQuery's <a href="http://api.jquery.com/queue/">effect queue</a> by default,
exactly like <em>$.fn.animate</em>. This means that transitions will never
run in parallel.</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').<br />    transition({ x: '-40px' }, 250).<br />    transition({ x: '0px' }, 250).<br />    transition({ y: '-40px' }, 250).<br />    transition({ y: '0px' }, 250);</pre>
</div>
<div class='field' style='height: 150px; overflow: hidden;'>
<div class='box' style='left: 180px; top: 45px;'></div>
</div>
</article>
<h2>Transitioning from one style to another</h2>
<div class='info'>
<p>You can chain <em>css</em> and <em>transition</em> together (<em>.css({ .. }).transition({ .. })</em>).</p>
</div>
<article>
<div class='hover'></div>
<div class='code'>
<pre>$('.box').<br />    css({ x: '-800px' }).<br />    transition({ x: 0 });</pre>
</div>
<div class='field' style='height: 150px; overflow: hidden;'>
<div class='box' style='left: 10px; top: 10px; width: 380px; height: 130px;'></div>
</div>
</article>
<h2>Browser support</h2>
<div class='info'>
<ul>
<li>IE <em>10+</em></li>
<li>Firefox <em>4+</em></li>
<li>Safari <em>5+</em></li>
<li>Chrome <em>10+</em></li>
<li>Opera <em>11+</em></li>
<li>Mobile Safari</li>
</ul>
</div>
<div class='more info'>
<p>See <a href="http://caniuse.com/#search=transition">caniuse.com's report</a> on CSS transitions.
To support Mobile Safari, jQuery Transit uses <em>translate3d</em> and <em>scale3d</em>.</p>
</div>
<h2>What about older browsers?</h2>
<div class='more info'>
<p>jQuery Transit degrades older browsers by simply not doing the
transformations (<em>rotate</em>, <em>scale</em>, etc) while still doing standard CSS
(<em>opacity</em>, <em>marginLeft</em>, etc) without any animation.<br/>
Delays and durations will be ignored.</p>
</div>
<h2>Fallback to frame-based animation</h2>
<div class='more info'>
<p>If you would like to fallback to classic animation when transitions
aren't supported<br/>
(usually not recommended, may be slow):</p>
<pre><b>// Delegate .transition() calls to .animate()</b><br /><b>// if the browser can't do CSS transitions.</b><br />if (!$.support.transition)<br />    $.fn.transition = $.fn.animate;</pre>
</div>
<h2>Setting defaults</h2>
<div class='more info'>
<pre><b>// Transit uses the same default as $.fn.animate.</b><br />$.fx.speeds._default = 300;</pre>
<pre><b>// Default easing is stored in $.cssEase.</b><br />$.cssEase._default = 'snap';</pre>
</div>
<h2>Custom easing</h2>
<div class='more info'>
<p>Define custom easing aliases in <em>$.cssEase</em>.</p>
<pre>$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';<br />$('.box').transition({ x: 0 }, 500, <b>'bounce'</b>);</pre>
</div>
<h2>Source code</h2>
<div class='info source'>
<a href='source.html'>
<span>See the annotated source code here.</span>
&rarr;
</a>
You may also browse the
<a href='https://github.com/rstacruz/jquery.transit'>
<span>GitHub repo.</span>
&rarr;
</a>
</div>
<h2>Upgrading info</h2>
<div class='more info'>
<p>
All versions of jQuery Transit should be perfectly backward compatible with it's older versions.
If you're upgrading from an old version, see
<a href='https://github.com/rstacruz/jquery.transit/blob/master/HISTORY.md'>
<span>the change log</span>
&rarr;
</a>
for info on what's changed.
</p>
</div>
<h2>Credits</h2>
<div class='credits'>
<p>Copyright 2011, Rico Sta. Cruz. Released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT
License</a>.</p>

<p>jQuery Transit is authored and maintained by <a href="http://ricostacruz.com">Rico Sta. Cruz</a> with help from it's
<a href="http://github.com/rstacruz/jquery.transit/contributors">contributors</a>. It is sponsored by my startup, <a href="http://sinefunc.com">Sinefunc, Inc</a>.</p>

<ul>
<li><a href="http://ricostacruz.com">My website</a> (ricostacruz.com)</li>
<li><a href="http://sinefunc.com">Sinefunc, Inc.</a> (sinefunc.com)</li>
<li><a href="http://github.com/rstacruz">Github</a> (@rstacruz)</li>
<li><a href="http://twitter.com/rstacruz">Twitter</a> (@rstacruz)</li>
</ul>
</div>
</div>
</body>
</html>
